const common = {
    data: function (target, attrName) {//获取对象数据，支持非标准json格式写法，数据放在 data-opt中
        attrName = attrName || 'data-opt';
        var options = {};
        var s = $.trim($(target).attr(attrName));
        s = s?s:$.trim($(target).attr('data-options'));
        if (s){
            if (s.substring(0, 1) != '{'){
                s = '{' + s + '}';
            }
            options = (new Function('return ' + s))();
        }
        return options;
    },
    screenAutoFit(){
        const ww = $(window).width();
        const wh = $(window).height();
        const per = ww/wh;
        const fPer = Math.floor(1600/9)/100;
        const $wrap = $('#pageWrap');
        if(per>fPer){
            $wrap.css({width: wh*fPer + 'px',height: wh + 'px'});
        }else{
            $wrap.css({width:ww + 'px', height: ww/fPer + 'px'});
        }
    },
    tabChange : function() {
        $('.h3-tabTitle').click(function() {
            var $title = $('.h3-tabTitle');
            var $tab = $('.tabC');
            var ix = $title.index(this);
            $title.removeClass('h3-tabTitle-now');
            $tab.removeClass('tabC-now');
            $(this).addClass('h3-tabTitle-now')
            $tab.eq(ix).addClass('tabC-now');
        })
    },
    extendSub : function() {
        var $w = $('.wrapper');
      $('.s-extendHandler').click(function() {
         var exin = $w.hasClass('exin');
         if(exin){
             $w.removeClass('exin');
         }else{
             $w.addClass('exin');
         }

      });
    },
};

const charts = {
    initChart: function(id, opt) {
        var myChart = echarts.init(document.getElementById(id));
        return myChart.setOption(opt);
    },
    gauge : function(id,opt) {
        const styles = [['#446bf5','#2ca3e2'],['#e98900','#e8e900'],['#10c702','#31ff78']];
        const style = styles[opt.style];
        const value = opt.value;
        var option = {
            series: [
                {
                    type: 'liquidFill',
                    radius: '70%',
                    center: ['50%', '50%'],
                    color: [
                        {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: style[0],
                                },
                                {
                                    offset: 1,
                                    color: style[1],
                                },
                            ],
                            globalCoord: false,
                        },
                    ],
                    data: [value, value], // data个数代表波浪数
                    backgroundStyle: {
                        borderWidth: 1,
                        color: 'RGBA(51, 66, 127, 0.7)',
                    },
                    label: {
                        normal: {
                            textStyle: {
                                fontSize: 14,
                                color: '#fff',
                            },
                        },
                    },
                    outline: {
                        // show: false
                        borderDistance: 0,
                        itemStyle: {
                            borderWidth: 1,
                            borderColor: '#112165',
                        },
                    },
                },
            ]
        };
        return this.initChart(id, option);
    },
    pie : function(id,data) {
        var option = {
            title: {
                text: "",
                subtext: "",
                left: "center",
                textStyle: {
                    color: "#fff",
                    fontSize: 14
                },
            },
            // backgroundColor: '#ffffff',
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}:({d}%)",
                fontSize: 14
            },
            series: [
                // {
                //     name: '分组',
                //     type: 'pie',
                //     radius: ['44%', '78%'],
                //     color: [ '#44aff5', '#f970a1','#fae395','#91d4e5','#8eb3e8'],
                //     label: {
                //         normal: {
                //             show: false,
                //            formatter: '{b}{d}%',
                //            lineHeight: 20,
                //         //    alignTo: 'labelLine',
                //         //    edgeDistance: '25%',
                //         // distanceToLabelLine : 2
                //         }
                //     },
                //     labelLine: {
                //         normal: {
                //             // show: false
                //             length: 4,
                //             length2: 2,
                //         }
                //     },
                //     data: data
                // },
                {
                name: '占比',
                type: 'pie',
                radius: ['32%', '70%'],
                color: ['#44aff5', '#f970a1', '#f4cf42', '#3dc6a8'],
                label: {
                    normal: {
                        formatter: '{b}\n{d}%',
                        position: 'inner'
                    }
                },
                itemStyle: { // 此配置
                    normal: {
                        borderWidth: 1,
                        borderColor: '#111339',
                    },
                    emphasis: {
                        borderWidth: 0,
                        shadowBlur: 2,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                data: data
            },]
        };
        return this.initChart(id, option);
    },
    line : function(id,opt) {
        const styles = [{
                a: '16,97,204',
                b: '17,235,210',
                c: '0,196,132',
            },
            {
                a: '205,52,42',
                b: '235,235,21',
                c: '99,250,235',
            }
        ];
        const style = styles[opt.style]

        var option = {
            // backgroundColor: '#424956',
            title: {
                text: opt.title,
                textStyle: {
                    fontWeight: 'normal',
                    fontSize: 14,
                    color: '#F1F1F3'
                },
                left: '6%',
                top: '7%',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: '#57617B'
                    }
                }
            },
            // legend: {
            //     icon: 'rect',
            //     itemWidth: 14,
            //     itemHeight: 5,
            //     itemGap: 13,
            //     data: ['移动', '电信', '联通'],
            //     right: '4%',
            //     textStyle: {
            //         fontSize: 12,
            //         color: '#292f39'
            //     }
            // },
            grid: {
                top: '28%',
                left: '2%',
                right: '5%',
                bottom: '4%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                axisLine: {
                    lineStyle: {
                        color: '#57617B',
                        fontSize:12,
                    }
                },
                data: opt.dataX,
            }],
            yAxis: [{
                type: 'value',
                // name: '本学期每天学校跳绳数 (w）',
                axisTick: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#57617B',
                        fontSize:12,
                    }
                },
                axisLabel: {
                    margin: 10,
                    textStyle: {
                        fontSize: 14
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: '#57617B'
                    }
                }
            }],
            series: [{
                // name: '移动',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        width: 3
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                            offset: 0,
                            color: 'rgba('+style.a +', 0.3)'
                        }, {
                            offset: 0.8,
                            color: 'rgba('+ style.b +', 0)'
                        }], false),
                        shadowColor: 'rgba(0, 0, 0, 0.1)',
                        shadowBlur: 10
                    }
                },
               itemStyle: {
                        normal: {

                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: 'rgba('+ style.a +',1)'
                            }, {
                                offset: 1,
                                color: 'rgba('+ style.b +',1)'
                            }])
                        },
                        emphasis: {
                        color: 'rgb('+ style.c +')',
                        borderColor: 'rgba(+ style.c +,0.2)',
                        extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
                        borderWidth: 10
                    }
                    },
                data: opt.dataY
            }]
        };

        return this.initChart(id, option);
    },
    bar : function(id,opt) {
        const styles = [['#51C5FD','#005BB1'],['#fdb56a','#f57f05'],['#eb82fd','#be1cdb'],['#fd9851','#db6b1c']];
        const style = styles[opt.style];

        var option = {
            // backgroundColor: '#00043A',
            title: {
                text: opt.title,
                textStyle: {
                    fontWeight: 'normal',
                    fontSize: 14,
                    color: '#F1F1F3'
                },
                left: '5%',
                top: '7%',
            },
            tooltip: {
                trigger: 'axis',
                show: false,
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                },
            },
            legend: {
                show:false
            },
            grid: {
                top: '25%',
                left: '5%',
                right: '15%',
                bottom: '2%',
                containLabel: true
            },
            xAxis: [{
                splitLine: {
                    show: false
                },
                type: 'value',
                show: false,
            }],
            yAxis: [{
                splitLine: {
                    show: false
                },
                axisLine: { //y轴
                    show: false
                },
                type: 'category',
                axisTick: {
                    show: false
                },
                inverse: true,
                data: opt.dataX,
                axisLabel: {
                    color: '#A7D6F4',
                    fontSize: 12,
                }
            }],
            series: [{
                name: '标准化',
                type: 'bar',
                barWidth: 10, // 柱子宽度
                barGap: '15%',
                label: {
                    show: true,
                    position: 'right', // 位置
                    color: '#A7D6F4',
                    fontSize: 12,
                    distance: 15, // 距离
                    formatter: '{c} %' // 这里是数据展示的时候显示的数据
                }, // 柱子上方的数值
                itemStyle: {
                    barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）
                        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: style[0]
                        }, {
                            offset: 1,
                            color: style[1]
                        }], false), // 渐变
                },
                data: opt.dataY
            }, ]
        };

        return this.initChart(id, option);
    },
    heap: function(id, data) {
        // var colors = ['#4C98FB', '#83CCE7', '#26C7C8', '#73DEBD', '#26C978', '#8CDF6C', '#FBD657', '#F56679', '#E07BCE', '#9D50E0', '#634FDA']
        var colors = [ '#83CCE7', '#73DEBD',  '#8CDF6C',  '#F56679', '#9D50E0', '#634FDA']
        // var colors = ['#4C98FB', '#26C7C8', '#26C978',  '#FBD657',  '#E07BCE', '#634FDA']
        //多维数组重组
        var array =data.data;
        var newarr = [];
        function getCol(matrix, col) {
            var column = [];
            for (var i = 0; i < matrix.length; i++) {
                column.push(matrix[i][col]);
            }
            return column;
        }

        //数组求百分比
        function countPercentage(countArray) {
            var j = eval(countArray.join('+'));
            var resultArray = [];
            for (var i = 0; i < countArray.length; i++) {
                var k = Math.floor((countArray[i] / j) * 100) ;

                resultArray.push(k);
            }
            return resultArray;
        }
        var arr2 = [];

        for (var i = 0; i < array[0].length; i++) {
            let list = getCol(array, i);
            newarr.push(list)
            arr2.push(countPercentage(list));
        }
        // console.log(newarr);
        // console.log(arr2);
        //还原数据结构
        var newdata =[];
        for (var i = 0; i < arr2[0].length; i++) {
            let list = getCol(arr2, i);
            newdata.push(list)
        }

        var option = {
            // title: {
            //     text: '大同市致贫原因分析',
            //     left: 19,
            //     top: 15,
            //     textStyle: {
            //         color: '#fff'
            //     }
            // },
            color: colors,

            legend: {
                top: 5,
                // left: 20,
                right: 10,
                itemWidth: 8,
                itemHeight: 10,
                // padding: [5, 10],
                textStyle: {
                    fontSize: 14,
                    color: '#96A4F4',
                    padding: [3, 0, 0, 0]
                },
                data: data.legend
            },
            grid: {
                top: '23%',
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                axisLabel: {
                    color: '#96A4F4'
                },
                axisLine: {
                    lineStyle: {
                        color: '#96A4F4'
                    },
                    width: 5
                },
                axisTick: {
                    show: false,
                },
                data: data.area
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    color: '#96A4F4'
                },
                axisLine: {
                    lineStyle: {
                        color: '#96A4F4'
                    },
                    width: 5
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(150, 164, 244, 0.3)'
                    }
                },
            },
            series: [

            ]
        };
        for (var i = 0; i < data.legend.length; i++) {
            option.series.push({
                name: data.legend[i],
                type: 'bar',
                stack: '总量',
                barWidth: '45%',
                label: {
                    show: true,
                formatter: '{c}%',

                },
                data: newdata[i]
            })
        }
        return this.initChart(id, option);
    }
};